<template>
    <div class="test">
      <mt-picker :slots="myAddressSlots" value-key="name" @change="onMyAddressChange"></mt-picker>
    </div>
</template>

<script>
  import myaddress from '../../../static/pca.json'     //引入省市区数据
  export default {
    data() {
      return {
        myAddressProvince:'省',
        myAddressCity:'市',
        myAddresscounty:'区/县',
        myAddressSlots: [
          {
            flex: 1,
            defaultIndex: 1,
            values:myaddress,
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values:[],
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '-',
            className: 'slot4'
          },
          {
            flex: 1,
            values:[],
            className: 'slot5',
            textAlign: 'center'
          }
        ],
      };
    },
    mounted(){
    this.$nextTick(() => { //vue里面全部加载好了再执行的函数  （类似于setTimeout）
      this.myAddressSlots[0].defaultIndex = 0
      // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
      //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
    });
  },
    methods: {

    onMyAddressChange(picker, values) {
      if (values[0]){
        picker.setSlotValues(1,values[0].children);
      }
      if (values[1]){
        picker.setSlotValues(2,values[1].children);
      }

    },
  },
  }
</script>

<style lang="less" scoped>

</style>
